<%@include file="/WEB-INF/pages/commons/commons.jsp" %>
<stripes:layout-definition>

<c:choose>
    <c:when test="${tab eq 'BlogDirectories'}">
        <c:set var="isBlogDirectoriesTab" scope="request" value="true"/>
        <c:set var="isRecentEntriesTab" scope="request" value="false"/>
    </c:when>
    <c:otherwise>
        <c:set var="isRecentEntriesTab" scope="request" value="true"/>
        <c:set var="isBlogDirectoriesTab" scope="request" value="false"/>
    </c:otherwise>
</c:choose>


<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>FooBarBlog - A Java Driven Weblog System</title>
<style type="text/css">
/* Global Menu */

#globalmenu {
    width: 100%;
    background-color: #36a;
    height: 26px;
    border-bottom: 1px solid #24518D;
    z-index: 300;
}

#globalmenu a {
    color: #fff
}

#globalmenu a:link {
    color: #fff;
}

#globalmenu a:hover {
    color: #fff;
}

#globalmenu a:visited {
    color: #ebf2fd;
}

#globalmenu a:active {
    color: #fff;
}

#globalmenu ul {
    list-style: none;
    padding: 0;
    margin: 0 0 0 8px;
}

#globalmenu li {
    float: left;
    padding: 0;
    margin: 0.5em 1em 0 0;
    font-size: 87%;
    color: #fff;
    font-weight: bold;
}

#globalmenu li.right {
    float: right;
    padding: 0;
    margin: 0.5em 1em 0 0;
    font-size: 87%;
    color: #fff;
    font-weight: bold;
}

#globalmenu li.beststuff {
    margin: 0;
    padding-top: 0.25em;
}

/* Global menu stuff */

div#mh_search {
    float: right;
    padding: 0em 0em 0em 1em;
    margin: 2px 1em 0 0;
}

*+html div#mh_search {
    margin-top: 0;
}

/* IE7 Fix */
* html div#mh_search {
/* IE6 Fix */
    margin-right: 0.5em;
    padding-left: 0em;
}

input#mh_searchQuery {
    color: #999;
    font-size: 85%;
    background-color: #ebf2fd;
    border: 1px solid #24518d;
    padding: 0.17em 0.0833em 0.17em 0.25em;
    width: 10em;
    margin: 0;
}

input#mh_searchQuery:focus,
    input#mh_searchQuery:hover {
    background-color: #fff;
    border: 1px solid #999;
    color: #333;
}

input#mh_searchSubmit {
    vertical-align: top;
}

ul#mh_login {
    float: right;
    padding: 0;
    margin: 0;
}

#site_logo {
    margin: 4px 0 1.0em 1.0em;
}

#site_logo img {
    cursor: pointer;
    border: 0;
}

#pageTitle h1 {
    padding: 0 0 0 6px;
    top: -10px;
    font-size: 200%;
    font-weight: normal;
    text-transform: capitalize;
    color: #484848;
    z-index: 900;
    float: left;
    position: relative;
    overflow: hidden;
}

.titleTabs,
    .headerTab {
    background: url( '<stripes:url value="${_themePath}/images/header-tabs-blue.gif"/>' ) repeat-x left bottom;
    padding-bottom: 16px;
    line-height: normal;
    width: 98%;
}

*+html .titleTabs, *+html .headerTab {
    padding-bottom: 16px;
}

* html .titleTabs, * html .headerTab {
    padding-bottom: 19px;
    width: auto;
    margin-right: 0.8em;
}

.newLinks {
    background-image: url( '<stripes:url value="${_themePath}/images/header-tabs-yellow.gif"/>' );
}

.titleTabs br, .headerTab br {
    clear: both;
}

.titleTabs ul, .headerTab div {
    font-size: 108%;
    font-weight: bold;
    margin: 0;
    padding: 0 0.5em 2.5em 0;
    list-style: none;
}

.titleTabs ul li a:link, .titleTabs ul li a:visited, .titleTabs ul li span, .titleTabs ul li strong, div.headerTab span {
    float: left;
    display: block;
    color: #396;
    padding: 0.55em 0.1em 0.55em 1.1em;
    background: url( '<stripes:url value="${_themePath}/images/header-tabs-yellow.gif"/>' ) no-repeat 0 -100px;
    text-decoration: none;
    outline: none;
    white-space: nowrap;
}

.newLinks ul li a:link, .newLinks ul li a:visited, .newLinks ul li span, .newLinks ul li strong {
    background-image: url( '<stripes:url value="${_themePath}/images/header-tabs-blue.gif"/>' );
    color: #36a;
}

div.headerTab span {
    background-image: url( '<stripes:url value="${_themePath}/images/header-tabs-blue.gif"/>' );
    color: #6190cf;
}

    /* Commented Backslash Hack
hides rule from IE5-Mac \*/
.titleTabs ul a, div.headerTab span {
    float: none;
}

/* End IE5-Mac hack */

.titleTabs ul li, div.headerTab h2 {
    float: right;
    background: url( '<stripes:url value="${_themePath}/images/header-tabs-yellow.gif"/>' ) no-repeat 100% -100px;
    margin: 0 0.1em 0 0;
    padding: 0 1em 0 0;
    text-align: center;
}

.newLinks ul li {
    background-image: url( '<stripes:url value="${_themePath}/images/header-tabs-blue.gif"/>' );
}

.titleTabs ul li.htactive, div.headerTab h2 {
    background: url( '<stripes:url value="${_themePath}/images/header-tabs-blue.gif"/>' ) no-repeat 100% 0;
}

.newLinks ul li.htactive {
    background-image: url( '<stripes:url value="${_themePath}/images/header-tabs-yellow.gif"/>' );
}

div.titleTabs ul li.htactive a:link, div.titleTabs ul li.htactive a:visited, div.titleTabs ul li.htactive span, div.titleTabs ul li.htactive strong,
    div.headerTab span {
    background: url( '<stripes:url value="${_themePath}/images/header-tabs-blue.gif"/>' ) no-repeat 0 0;
    padding: 0.55em 0.1em 0.63em 1.1em;
    color: #36a;
}

div.newLinks ul li.htactive a:link, div.newLinks ul li.htactive a:visited, div.newLinks ul li.htactive span, div.newLinks ul li.htactive strong {
    background-image: url( '<stripes:url value="${_themePath}/images/header-tabs-yellow.gif"/>' );
    color: #396;
}

.titleTabs ul li a:hover {
    color: #6bb38f;
}

.newLinks ul li a:hover {
    color: #6190cf;
}

p.linklistSort {
    margin: 0 0 0.5em 0;
    padding: 3px 0 0 6px;
    color: #693;
    color: #396;
    font-weight: bold;
    width: 98%;
    clear: both;

}

    /* ----------------------------------------------------------------------
   General styles
   ---------------------------------------------------------------------- */

body {
    margin: 0px;
    padding: 0px;
    background-color: white;
    color: black;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
}

p.subtitle {
    font-size: 1em;
    font-weight: bold;
    font-size: 120%;
}

p.pagetip {
    margin: 0px 0px 15px 0px;
}

h1 {
    background: transparent;
    font-size: 20px;
    font-weight: bold;
}

h2 {
    background: transparent;
    font-size: large;
    font-weight: bold;
    letter-spacing: 0.2em;
}

h3 {
    letter-spacing: normal;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    text-decoration: none;
    margin: 0px;
}

img {
    border: 0px;
    overflow: auto;
}

img.w3c {
    border: 0px;
    height: 31px;
    width: 88px;
    margin-right: 5px;
}

a {
    text-decoration: none;
}

a:link {
    text-decoration: none;
}

a:visited {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

a:active {
    text-decoration: underline;
}

    /* --------------------------------------------------------
   Page components
   -------------------------------------------------------- */

.bannerStatusBox a, .bannerStatusBox a {
    font-weight: bold;
}

.bannerLeft {
    padding: 4px 15px 4px 10px;
}

.bannerRight {
    padding: 4px 10px 4px 15px;
    text-align: right;
}

.bannerBox {
    width: 100%;
    background: #fff;
}

div.entries {
    padding: 15px;
}

div.entry {
    margin: 0;
    border-bottom: 1px solid #36a;
    padding: 5px;
    background: #fff;

}

div.pinned {
    background: #fff url( '<stripes:url value="${_themePath}/images/lightbulb.gif"/>' ) 0 3px no-repeat;
}

#tabContent {
    background: #fff;
    padding: 0px;
    border: 1px solid #fff;
}

#directory {
    padding: 15px;
}

#recentEntries {
    padding: 5px;
}

html>body div.entry {
    border-bottom: none;
    padding-bottom: 0px;
}

div.entry+div.entry {
    border-top: 1px;
    padding: 4px;
}

div.entry h2 {
    margin: 0px;
    font-size: 12px;
}

div.entries div.pagingcontrols {
    margin-top: 20px;
    text-align: right;
}

div.entriesBoxInner {
    padding: 5px;
}

div.entriesBox {
    font-family: Arial, Helvetica, sans-serif;
    border-bottom-width: thin;
    border-bottom-style: solid;
    padding: 4px;
}

div.entryBoxPinned {
}

.entryTitle {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    text-decoration: none;
    font-size: 130%;
    margin: 0px;
    padding: 0px;
}

div.pinned .entryTitle {
    padding-left: 18px;
}

.entryDetails {
    font-family: Arial, Helvetica, sans-serif;
    text-decoration: none;
    color: #777;
    font-size: 80%;
    margin: 0px;
    padding: 0px;
}

.entryDescription {
    font-family: Arial, Helvetica, sans-serif;
    text-decoration: none;
    margin-top: 0.25em;
    margin-bottom: 0.5em;
}

span.hotBlogs, a.hotBlogs, a:active.hotBlogs, a:visited.hotBlogs, ul.hotBlogs {
    font-size: small;
    padding-left: 0px;
    list-style-type: none
}

input.searchButton {
    cursor: pointer;
    font-family: lucida, arial, sans-serif;
    height: 1.4em;
    font-weight: bold;
    font-size: 11px;
    padding: 0px 0px 2px 0px;
    margin: 5px;
    border: 0px none #000;
}

.sidebarBodyHead h3, .searchSidebarBody h3 {
    padding: 5px;
}

.sidebarInner {
    padding: 5px;
}

.sidebarBody ul {
    margin: 0px;
    padding-left: 5px;
}

.sidebarBody li {
    list-style-position: inside;
    list-style-image: url( '<stripes:url value="${_themePath}/images/dash.gif"/>' );
    margin-left: 0em;
    padding-left: 0.5em;
    padding-top: 3px;
}

    /* --------------------------------------------------------
   layout
   -------------------------------------------------------- */

#banner {
    margin: 0px;
    padding: 0px 0px 0px 0px;
}

.bannerBox {
    width: 100%;
}

.bannerStatusBox {
    width: 100%;
    border: gray 1px solid;
}

.sidebarBodyHead {
    height: 25px;
}

.searchSidebarHead {
    height: 5px;
}

.searchSidebarBody {
    margin: 0px 0px 0px 0px;
}

.searchSidebarBody input {
    margin: 5px;
}

#avpaBody {
    text-align: center;
    margin-bottom: 20px;
}

#menu {
    padding: 0px 10px 0px 10px;
}

#content {
}

#centercontent_wrap {
    width: 70%;
    float: left;
    display: inline;
}

#centercontent {
    margin: 10px;
}

#rightcontent_wrap {
    float: right;
    display: inline;
    width: 29%;
}

#rightcontent {
    margin: 10px;
}

#footer {
    clear: both;
    padding: 15px 0px 15px 0px;
    font-size: smaller;
    text-align: center;
}

    /* --------------------------------------------------------
   Colors
   -------------------------------------------------------- */

#logobackground {
    background: #ad3431 !important;
}

.bannerBox {
    background: url( '<stripes:url value="${_themePath}/images/tan-banner.gif"/>' ) repeat-x top;
}

.bannerStatusBox {
    background: #3366aa;
    color: white;
}

.bannerStatusBox a {
    color: white;
}

.bannerStatusBox a:link {
    color: white;
}

.bannerStatusBox a:visited {
    color: white;
}

h1 {
    color: #36c;
}

h2 {
    color: #36c;
}

h3 {
    background: transparent;
    color: #36c;
    font-weight: bold;
}

a:link {
    color: #36c;
}

a:visited {
    color: #36c;
}

div.yourWeblogBox {
    border-top: 1px #c6ab74 solid;
}

input.searchButton {
    color: white;
    background: #ad3431;
}

.sidebarBodyHead {
    background: #36a;
    color: white;
}

.searchSidebarBodyHead h3 {
    color: black;
}

.sidebarBodyHead h3 {
    color: white;
}

.sidebarFade, div.sidebarBody {
    background: #ebf2fd;
    color: #666666;
}

.searchSidebarHead {
    background: #f1ebdf;
}

.searchSidebarBody {
    background: #f1ebdf;
}

td.menuTabSelected {
    background: url( '<stripes:url value="${_themePath}/images/menutab-sel.gif"/>' ) repeat-x;
}

td.menuTabUnselected {
    background: url( '<stripes:url value="${_themePath}/images/menutab-unsel.gif"/>' ) repeat-x;
}

.menuItemTable {
    background-color: #36a;
    color: black;
}

td.menuTabSelected a:link, td.menuTabSelected a:visited, td.menuTabSelected a:hover, td.menuTabSelected a:active {
    color: black;
}

td.menuTabUnselected a:link, td.menuTabUnselected a:visited, td.menuTabUnselected a:hover, td.menuTabUnselected a:active {
    color: black;
}

a.menuItemSelected:link, a.menuItemSelected:visited, a.menuItemSelected:hover, a.menuItemSelected:active {
    color: black;
}

a.menuItemUnselected:link, a.menuItemUnselected:visited, a.menuItemUnselected:hover, a.menuItemUnselected:active {
    color: black;
}

    /* ----------------------------------------------------------------------
   Blog directory
   ---------------------------------------------------------------------- */

div.letterMap strong.current a {
    color: black;
}

table.data {
    border-collapse: collapse;
    border-spacing: 0px;
    margin-bottom: 10px;
}

table.data th,
    table.data td {
    padding: 2px 20px 2px 0px;
    text-align: left;
}

table.blogdirectory {
    width: 100%;
}

table.blogdirectory thead th {
    padding-bottom: 17px;
}

table.blogdirectory .name {
    width: 20em;
}

table.blogdirectory tfoot td {
    padding-top: 17px;
}

table.blogdirectory tr.pagingcontrols td.paginglinks {
    text-align: right;
    padding-right: 0px;
}

    /* ----------------------------------------------------------------------
   Menu
   ---------------------------------------------------------------------- */

#menu h1 {
    line-height: 120%;
}

div.menu-tl {
    margin: 0px;
    padding: 0px;
    height: 100%;
    width: 100%;
    background: url( '<stripes:url value="${_themePath}/images/menutab-t1.gif"/>' ) no-repeat top left;
    background-repeat: no-repeat;
    vertical-align: middle;
    display: table;
}

div.menu-tr {
    margin: 0px;
    padding: 0px;
    height: 100%;
    width: 100%;
    background: url( '<stripes:url value="${_themePath}/images/menutab-tr.gif"/>' ) no-repeat top right;
    background-repeat: no-repeat;
}

td div.menu-tr div.menu-tl a {
    display: table-cell;
    vertical-align: middle;
    padding: 3px 5px 0px 5px;
}

.menuTabTable {
    height: 25px;
    _height: 21px; /* for IE */
    margin: 0px;
    padding: 0px;
}

td.menuTabSeparator {
    width: 4px;
}

td.menuTabSelected {
    margin: 0px;
    padding: 0px;
    font-weight: bold;
    vertical-align: top;
}

td.menuTabUnselected {
    margin: 0px;
    padding: 0px;
    vertical-align: top;
}

.menuItemTable {
    padding-right: 0px;
    padding-bottom: 0px;
    width: 100%;
    height: 2px;
    padding: 0px 0px 0px 10px;
}

.menuItemSelected {
    padding-right: 1px;
    padding-left: 1px;
    padding-bottom: 0px;
    padding-top: 0px;
    font-weight: bold;
}

.menuItemUnselected {
    padding: 0px 1px 0px 1px; /* TRBL */
}

#tagbin {
    padding: 4px;
}

#tagbin a {
    line-height: 100% ! important;
}

#tagbin a:hover {
    color: #02a ! important;
}

a.s5, a.s5:visited {
    font-size: 135%;
    color: #36a ! important;
}

a.s4, a.s4:visited {
    font-size: 125%;
    color: #36a ! important;
}

a.s3, a.s3:visited {
    font-size: 120%;
    color: #36a ! important;
}

a.s2, a.s2:visited {
    font-size: 115%;
    color: #36a ! important;
}

a.s1, a.s1:visited {
    font-size: 110%;
    color: #36a ! important;
}

/* end css */
</style>
<title>${_title}</title>
<stripes:layout-component name="_head"/>
</head>
<body class="view" bgcolor="#FFFFFF">
<div id="globalmenu">
    <ul>
        <!-- left hand side -->
        <stripes:layout-component name="_leftHandSideGlobalMenu"/>


        <!-- far most right hand side -->
        <div id="mh_search">
            <stripes:layout-component name="_searchInGlobalMenu"/>
        </div>

        <!-- right hand side -->
        <ul id="mh_login">
            <stripes:layout-component name="_rightHandSideGlobalMenu"/>
        </ul>
    </ul>
</div>

<!-- logo -->
<div id="site_logo">
    <stripes:layout-component name="_siteLogo"/>
</div>


<div id="centercontent_wrap">
    <div id="centercontent">
        <div id="pageTitle">
            <div class="titleTabs">
                <!-- title -->
                <h1>
                    <c:choose>
                        <c:when test="${isBlogDirectoriesTab}">
                            ${_subTitle}
                        </c:when>
                        <c:otherwise>
                            ${_mainTitle}
                        </c:otherwise>
                    </c:choose>
                </h1>

                <!-- tabs -->
                <ul>
                    <li
                            <c:choose>
                                <c:when test="${isBlogDirectoriesTab}">
                                    class="htactive"><strong>${_subTitle}</strong>
                                </c:when>
                                <c:otherwise>
                                    ><stripes:link beanclass="foo.bar.blog.web.action.general.MainActionBean"
                                                   event="viewWeblogDirectories">${_subTitle}</stripes:link>
                                </c:otherwise>
                            </c:choose>
                    </li>
                    <li
                            <c:choose>
                                <c:when test="${isRecentEntriesTab}">
                                    class="htactive"><strong>${_mainTitle}</strong>
                                </c:when>
                                <c:otherwise>
                                    <stripes:link beanclass="foo.bar.blog.web.action.general.MainActionBean"
                                                  event="view">${_mainTitle}</stripes:link>
                                </c:otherwise>
                            </c:choose>
                    </li>
                </ul>
            </div>
        </div>
        <br>

        <div id="tabContent">
            <stripes:layout-component name="_content"/>
            <br/>
            <!-- entries listing bottom -->
            <stripes:layout-component name="_contentFooter"/>
        </div>
    </div>
</div>

<div id="rightcontent_wrap">
    <div id="rightcontent">
        <div id="avpaBody">
        </div>
        <stripes:layout-component name="_sideBox"/>
        <br/>
    </div>
</div>


<div id="footer">
    <stripes:layout-component name="_footer"/>
</div>

<div id="datetagdiv"
     style="position:absolute;visibility:hidden;background-color:white;layer-background-color:white;">
</div>

</body>
</html>
</stripes:layout-definition>

